import { useAppSelector } from '../../hooks/typedHooks'
import { selectRemainingWords, selectRememberedWords } from '../../state/wordSlice'
import './style.css'
const Progress = () => {
	const remembered = useAppSelector(selectRememberedWords)
	const remaining = useAppSelector(selectRemainingWords)

	return (
		<div className='progress'>
			{/* <progress value={remembered} min={0} max={remembered + remaining} /> */}
			<progress value={remembered} max={remembered + remaining}></progress>
			<span>{parseFloat((remembered / (remembered + remaining)).toFixed(2)) * 100}%</span>
			<p>已记住：{remembered} 个</p>
			<p>剩余：{remaining} 个</p>
		</div>
	)
}

export default Progress
